<!DOCTYPE html>
<html>
<head>
	<meta name="viewpoint" content="width-device-width, initial-scale=1">
	<link rel="stylesheet" href="jquery.mobile-1.4.2.min.css" />
	<style type="text/css">
		#buttonPanel{ width: 100 % ; height: 8% ; overflow: hidden; margin:0;font-size:2em;padding-top: 16px;padding-left: 5px;}
		.fitfont{font-size: 1.05em}
		#id1{ width: 100 % ; height:8% ; overflow: auto; margin:0;background-color:white;}
		#map { width: 100 % ; height: 70% ; overflow: hidden; margin:0;padding:0;background-color:red;position: absolute;top:24%;left: 0px;right: 0px;}
		#main{margin:0;padding:0;width:100 %;height: 100%;background-color:yellow;width: 800px;height: 1280px;}  /*for test*/
		body{margin: 0;padding: 0;width: 100%;background-color:blue}
		head{width: 0px;height: 0px}
	</style>
	<script src="jquery-1.9.1.min.js"></script>
	<script src="jquery.mobile-1.4.2.min.js"></script>
</head>
<body>

	<div data-role='page' id="main">


		<div id="dialog"  data-role="popup">
		<input type="text" name="destination" value="广西大学" id="textDes"/>
		<a href="#" class="ui-btn ui-corner-all   ui-btn-b" data-rel="back" onclick="findByDestination();">ok</a>
		</div>
		<div "togglebutton" class="ui-content" id="buttonPanel" >
		<a href="#dialog" data-rel="popup" class="ui-btn ui-corner-all ui-mini ui-btn-inline fitfont" data-transition="pop"  >open </a>
		<a href="#dialog" data-rel="popup" class="ui-btn ui-corner-all ui-mini ui-btn-inline fitfont" data-transition="pop"  >open </a>
		<a href="#dialog" data-rel="popup" class="ui-btn ui-corner-all ui-mini ui-btn-inline fitfont" data-transition="pop"  >open </a>
		</div>
		<div id="id1" class="ui-content">
			id1
		</div>
		<div id="map">sdfsdfsdfsdfsdfsdfsdf</div>
	</div>
</body>
</html>

<script type="text/javascript" src="LBS.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=dIxxNjwL75O1iLrXxKFmPmii"></script>
<script type="text/javascript">
	function commonOut(text) {
		document.getElementById("id1").innerHTML += text + " <br/> ";
	}


	function start() {
		try {
			LBS.createMap('map');
			LBS.start();
			setMapSize();
		} catch(e) {
			alert(e);
		}
	}

	findByDestination=function()
		{
			var desText=document.getElementById("textDes");
			if(desText)
			{
				var text=desText.value;
				LBS.findLocation(text,'南宁市');
				//LBS.searchBusLine(text);
				var route=new LBS.Route(LBS.mapObject,LBS.curPosition);
				route.findRoute(text);
			}
			

		}
	function toggleButton()
	{
		var isOpen=$("#dialog").dialog("isOpen")
		if(isOpen)
		{
			$("#dialog").dialog("close");
		}
		else
		{
			$("#dialog").dialog("open");
		}
	}
	function setMapSize()
	{
		var array=new Array();
		array.push('buttonPanel');
		array.push('id1');
		var sumHeight=0;
		var paddingPx=16*array.length;
		for(i=0;i<array.length;i++)
		{
			var id=array[i];
			var obj=document.getElementById(id);
			var height=parseInt( window.getComputedStyle(obj,null).getPropertyValue("height"));
			sumHeight=sumHeight+ height;
		}
		//get body height
		var mainObj=document.getElementById("main");
		var mainHeight=parseInt( window.getComputedStyle(mainObj,null).getPropertyValue("height"));
		var mapHeight=mainHeight-sumHeight-paddingPx;
		var attributeHeight=mapHeight+"px";
		document.getElementById('map').style.height=String(attributeHeight);
		commonOut(mainHeight);
	}

	window.onload = start();
</script>
